<template>
    <view class="container">
        <!--u-navbar
            leftIconSize="44rpx"
            :autoBack="true"
            bgColor="#131415"
            leftIconColor="#ffffff"
        >
        </u-navbar-->
        <view class="title">
            <u-text
                :text="nft.name"
                size="34rpx"
                :lines="1"
                bold
                color="#FFFFFF"
                align="center"
            ></u-text>
        </view>
        <view v-if="product.type != 'shop' && isShowTags =='1'" class="nft-tag"></view>
        <!--view class="product-image">
            <image :src="nft.img" class="image" mode="aspectFill"></image>
        </view>
        <view class="nft-info">
            <u-row customStyle="margin-bottom: 40rpx" :gutter="20">
                <u-col span="6">
                    <u-text
                        text="合约地址"
                        size="24rpx"
                        color="#000000"
                    ></u-text>
                    <view class="input">
                        <text>{{ getSpliceText(nft.contractAddr) }}</text>
                        <text @click="copy(nft.contractAddr)">复制</text>
                    </view>
                </u-col>
                <u-col span="6">
                    <u-text
                        text="认证标识"
                        size="24rpx"
                        color="#000000"
                    ></u-text>
                    <view class="input">
                        <text>{{ nft.tokenId }}</text>
                        <text @click="copy(nft.tokenId)">复制</text>
                    </view>
                </u-col>
            </u-row>
            <u-row customStyle="margin-bottom: 40rpx" :gutter="20">
                <u-col span="6">
                    <u-text
                        text="认证标准"
                        size="24rpx"
                        color="#000000"
                    ></u-text>
                    <view class="text-info">
                        <u-text
                            :text="nft.type === 'e721'? 'ERC721':'ERC1155'"
                            size="24rpx"
                            color="#999999"
                        ></u-text>
                    </view>
                </u-col>
                <u-col span="6">
                    <u-text
                        text="认证网络"
                        size="24rpx"
                        color="#000000"
                    ></u-text>
                    <view class="text-info">
                        <u-text
                            text="Polygon"
                            size="24rpx"
                            color="#999999"
                        ></u-text>
                    </view>
                </u-col>
            </u-row>
        </view-->
        <view class="product-image">
            <image
               :src="nft.img"
               style="width:544rpx;height:544rpx;"
               class="image"
               mode="aspectFit"
            ></image>
        </view>
        <view class="nft-detail">
            <view class="nft-stock">
                <view class="nft-stock-name">发行量</view>
                <view class="nft-stock-content">{{ nft.total }}</view>
            </view>
            <view class="nft-info-tag">可转赠</view>
        </view>
        <view style="padding: 30rpx 30rpx 0 30rpx;" v-if="productInfo.author">
            <view class="user">
                <view class="user-image">
                    <image :src="productInfo.author.avatar" style="width: 100%; height: 100%;border-radius: 50%;"></image>
                </view>
                <view class="user-info">
                    <view class="user-desc">创作者</view>
                    <view class="user-name">{{ productInfo.author.name }}</view>
                </view>
            </view>
            <view class="border" style="margin-bottom: 20rpx;"></view>
        </view>
        <view class="detail-item" style="margin-top: 50rpx;">
            <view class="detail-title">···————「 藏品故事 」————···</view>
            <view class="product-detail"><rich-text :nodes="productInfo.detail"></rich-text></view>
        </view>
        <view class="border"></view>
        <view class="detail-item">
            <view class="detail-title">···————「 发行信息 」————···</view>
            <view class="nft-info">
                <u-row customStyle="margin-bottom: 40rpx" :gutter="20">
                    <u-col span="6">
                        <u-text
                                text="合约地址"
                                size="24rpx"
                                color="#B6B6B6"
                        ></u-text>
                        <view class="input">
                            <text>{{ getSpliceText(nft.contractAddr) }}</text>
                            <text @click="copy(nft.contractAddr)">复制</text>
                        </view>
                    </u-col>
                    <u-col span="6">
                        <u--text
                                text="认证标识"
                                size="24rpx"
                                color="#B6B6B6"
                        ></u--text>
                        <view class="input">
                            <text>{{ nft.tokenId }}</text>
                            <text @click="copy(nft.tokenId)">复制</text>
                        </view>
                    </u-col>
                </u-row>
                <u-row customStyle="margin-bottom: 40rpx" :gutter="20">
                    <u-col span="6">
                        <u-text
                                text="认证标准"
                                size="24rpx"
                                color="#B6B6B6"
                        ></u-text>
                        <view class="text-info">
                            <block v-if="nft.type == 'e721'">
                                ERC721
                            </block>
                            <block v-if="nft.type == 'e1155'">
                                ERC1155
                            </block>
                        </view>
                    </u-col>
                    <u-col span="6">
                        <u-text
                                text="认证网络"
                                size="24rpx"
                                color="#B6B6B6"
                        ></u-text>
                        <view class="text-info">
                            Polygon
                        </view>
                    </u-col>
                </u-row>
            </view>
        </view>
        <view style="height: 110rpx"></view>
        <view class="bottom">
            <view class="tiqu">
                <u-icon
                    name="https://img.ionepin.com/319b827478c5ae2b09767f3e355eaf30889fb82c.png"
                    @click="navigateTo('pages/extractDetail/index', {nftId: nft.id})"
                    width="84rpx"
                    height="84rpx"
                ></u-icon>
                <!---view class="btn" @click="popupShow()" v-if="userNft.balance > 0 ">
                    <view class="btn-text">提取</view>
                    <view class="tips">可提取 {{ userNft.balance }}</view>
                </view--->
                <view class="btn-withdraw" @click="showTips = true">
                    去提取 <text>({{ userNft.balance }})</text>
                </view>
                <!--view class="btn-write">
                    去核销<span>({{ userNft.verifyBalance }})</span>
                </view-->
                <view class="btn-pass" v-if="!nft.is_pass" @click="popupPassShow()">
                    转赠期 {{ nft.valid_date }}
                </view>
                <view class="btn-withdraw" v-else @click="popupPassShow()">
                    去转赠
                </view>
                <!--u-icon
                    name="https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_send.png"
                    width="84rpx"
                    height="84rpx"
                    @click="popupPassShow()"
                ></u-icon-->
                <!--view class="btn">
                    <view class="btn-text" style="line-height: 90rpx; margin-top: 0;">已提取</view>
                </view-->
            </view>
        </view>
        <u-modal :show="showTips" @confirm="popupShow()" title="注意" :content="'1. 请提取到个人Polygon网络钱包地址\n2.NFT是链上资产提取过程不可逆'"></u-modal>
        <u-popup :show="showPopup" round="18rpx" mode="center">
            <view class="popup-content">
                <view class="popup-title">提取</view>
                <view class="popup-form">
                    <view class="input">
                        <u-input
                            placeholder="请输入钱包地址"
                            inputAlign="center"
                            fontSize="28rpx"
                            border="none"
                            v-model="form.toAddr"
                        ></u-input>
                    </view>
                    <view class="input">
                        <u-input
                            placeholder="请输入提取数量"
                            inputAlign="center"
                            fontSize="28rpx"
                            border="none"
                            disabledColor="#EEEEEE"
                            v-model="form.number"
                            :disabled="nft.type == 'e721'"

                        ></u-input>
                    </view>
                    <view class="tips">可提取 {{ userNft.balance }}</view>
                    <view class="button">
                        <view class="cancel" @click="showPopup = false">取消</view>
                        <view class="confirm" @click="onsubmit">确认</view>
                    </view>
                </view>
            </view>
        </u-popup>
        <u-popup :show="showPopupPass" round="18rpx" mode="center">
            <view class="popup-content">
                <view class="popup-title">转赠</view>
                <view class="popup-tips" v-if="!nft.is_pass">{{ nft.valid_date_chinese }}后可转赠</view>
                <view class="popup-form">
                    <view class="input">
                        <u-input
                            placeholder="请输入转赠人手机号"
                            inputAlign="center"
                            fontSize="28rpx"
                            border="none"
                            v-model="tradeFrom.mobile"
                        ></u-input>
                    </view>
                    <view class="input">
                        <u-input
                            placeholder="请输入转赠数量"
                            inputAlign="center"
                            fontSize="28rpx"
                            border="none"
                            disabledColor="#EEEEEE"
                            v-model="tradeFrom.number"
                        ></u-input>
                    </view>
                    <view class="tips" style="color: #356CE7; font-size: 24rpx;">可使用 {{ userNft.balance }}</view>
                    <view class="button">
                        <view class="cancel" @click="showPopupPass = false">取消</view>
                        <view class="confirm" v-if="nft.is_pass" @tap="$u.throttle(gift, 2000)">确认</view>
                        <view class="confirm-disable" v-else>确认</view>
                    </view>
                </view>
            </view>
        </u-popup>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>
<script>
import { getNftInfo, getCsrfToken, withdrawSubmit, nftGift} from "@/config/api"
export default {

    data() {
        return {
            form: {
                number: null,
                token: null,
                userNftId: null,
                toAddr: null
            },
            product: {},
            nft: {},
            userNft: {},
            showflag: false,
            barHeight: "0px",
            showPopup: false,
            showPopupPass: false,
            tradeFrom: {
                mobile: null,
                number: null,

            },
            id: null,
            productInfo: {
                albumImgs: []
            },
            showTips: false
        }
    },
    onLoad(option) {
        this.id = option.id
        this.getData()
        /*const res = uni.getSystemInfoSync()
        var height = res.statusBarHeight
        this.barHeight = height? height + 44 + "px": "44px"*/
    },
    computed: {
        userId() {
            return this.$store.getters.userId
        },
        isShowTags() {
            return this.$store.getters.isShowTags
        }
    },
    methods: {
        onChange(index) {
            console.log(index)
        },
        navigateTo(path, params={}) {
            uni.$u.route({
				url: path,
				params
			})
        },
        async getData() {
            const res = await getNftInfo(this.id)
            //this.product = res.product
            this.nft = res.nft
            this.userNft = res.userNft
            this.productInfo = res.product
            this.form.number = this.nft.type == 'e721'? 1:null
            //this.tradeFrom.number = this.nft.type == 'e721'? 1:null
            this.form.userNftId = this.userNft.id
        },
        async onsubmit() {
            uni.showLoading({
                title: '正在发起转赠'
            })
            const res = await withdrawSubmit(this.form)
            uni.hideLoading()
            this.$refs.uToast.show({
                type: 'default',
                message: "提取成功"
            })
            this.showPopup = false
        },
        async onlogin() {
            await this.$store.dispatch("user/login")
        },
        copy(text) {
            uni.setClipboardData({
                data: text + '',
                success: function () {
                    this.$refs.uToast.show({
                        type: 'default',
                        message: "复制成功"
                    })
                },
                fail: function() {
                    console.log('复制失败')
                }
            });
        },
        getSpliceText(str) {
            if (!str) {
                return str
            }
            var sub1 = str.slice(0, 8)
            var sub2 = str.slice(-6)
            return sub1 + '...' +sub2
        },
        async popupShow() {
            const res = await getCsrfToken()
            this.form.token = res
            this.showPopup = true
            this.showTips = false
        },
        popupPassShow() {
            this.showPopupPass = true
            this.tradeFrom = {
                mobile: null,
                number: null,
                userNftId: this.userNft.id
            }
        },
        async gift() {
            if (!uni.$u.test.mobile(this.tradeFrom.mobile)) {
                uni.$u.toast("请输入正确手机号")
                return
            }
            const res = await nftGift(this.tradeFrom)
            this.getData()
            this.$refs.uToast.show({
                type: 'default',
                message: "转赠成功"
            })
            this.showPopupPass = false
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        background: #131415;
        padding-top: 30px;
        .detail-item {
            .detail-title {
                text-align: center;
                color: #ffffff;
                margin-bottom: 47rpx;
            }
        }
        .title {
            width: 636rpx;
            margin-right: auto;
            margin-left: auto;
            margin-bottom: 18rpx;

        }
        .nft-tag {
            width: 100rpx;
            height: 40rpx;
            background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/967825cfb630bf72832c10b8d3ed3d64ad249bc8.png) no-repeat;
            background-size: 100% 100%;
            margin: auto;
            margin-bottom: 12rpx;
        }
        .product-image {
            box-sizing: border-box;
            width: 636rpx;
            height: 636rpx;
            background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/product_border.png) no-repeat;
            background-size: 100% 100%;
            padding: 30rpx 40rpx 56rpx 40rpx;
            margin: auto;
            z-index: -999;
            .image {
                height: 556rpx;
                width: 556rpx;
            }
        }
        .product-info {
            padding: 0 26rpx;
            position: relative;
            .spec-info {
                margin-top: 45rpx;
            }
            .spec {
                margin-top: 15rpx;
                display: flex;
                flex-wrap: wrap;
                .spec-tag {
                    box-sizing: border-box;
                    padding: 8rpx 40rpx;
                    border: 1rpx solid #B6B6B6;
                    margin-right: 20rpx;
                    margin-bottom: 20rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                }
                .selected {
                    border: none;
                    background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/tag_selected.png) no-repeat center;
                    background-size: 100% 100%;
                }
                .disable {
                    border: 1px solid #f4f4f5;
                    background: #f4f4f5;
                    color: #999999;
                }
            }
            .product-stock {
                position: absolute;
                right: 26rpx;
                top: 0;
            }
        }
        .border {
            width: 100%;
            height: 1rpx;
            background: #2E2F30;
            margin: 60rpx 0;
        }
        .nft-info {
            padding: 0 26rpx;
            .input {
                background-color: #2E2F30;
                height: 68rpx;
                padding: 0 18rpx;
                line-height: 68rpx;
                margin-top: 20rpx;
                text {
                    font-size: 24rpx;
                    &:nth-child(1) {
                        color: #999999;
                    }
                    &:nth-child(2) {
                        display: block;
                        float: right;
                        color: #FFFFFF;
                    }
                }
            }
            .text-info {
                background-color: #2E2F30;
                height: 68rpx;
                padding: 0 18rpx;
                line-height: 68rpx;
                margin-top: 20rpx;
                font-size: 24rpx;
                color: #FFFFFF;
            }
        }
        .user {
            background: url(https://img.ionepin.com/0c84978e6f90e4871fb4358b65a20decb1f3ee04.png) no-repeat;
            background-size: 100% 100%;
            width: 100%;
            height: 120rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .user-image {
                width: 74rpx;
                height: 74rpx;
                border-radius: 37px;
            }
            .user-info {
                margin-left: 18rpx;
                .user-desc {
                    font-size: 22rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #B6B6B6;
                    line-height: 30rpx;
                }
                .user-name {
                    margin-top: 6rpx;
                    font-size: 26rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 37rpx;
                }
            }
        }
        .product-detail {
            width: 100%;
            padding: 0 25rpx 0 25rpx;
            box-sizing: border-box;
        }
        .bottom {
            background-color: #000000;
            box-sizing: border-box;
            padding: 0 20rpx;
            position: fixed;
            bottom: 0rpx;
            left: 0;
            width: 100%;
            .tiqu {
                height: 110rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .btn-withdraw {
                    flex: 1;
                    box-sizing: border-box;
                    height: 78rpx;
                    //background: #FFFFFF;
                    border-radius: 4rpx;
                    border: 1rpx solid #B6B6B6;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 78rpx;
                    margin-left: 16rpx;
                    text {
                        margin-left: 8rpx;
                        font-size: 22rpx;
                        font-weight: 400;
                        color: #999999;
                    }
                }
                .btn-write {
                    box-sizing: border-box;
                    width: 180rpx;
                    height: 78rpx;
                    //background: #000000;
                    margin-left: 16rpx;
                    border-radius: 4rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 78rpx;
                    border: 1rpx solid #B6B6B6;
                    span {
                        margin-left: 8rpx;
                        font-size: 22rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;
                    }
                }
                .btn-pass {
                    flex: 1;
                    padding: 0 32rpx;
                    height: 78rpx;
                    background: rgba(255, 255, 255, 0.2);
                    border-radius: 4rpx;
                    font-size: 26rpx;
                    font-weight: 400;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 78rpx;
                    margin-left: 16rpx;
                }
                .btn {
                    flex: auto;
                    height: 90rpx;
                    background: #000000;
                    margin-left: 16rpx;
                    .btn-text {
                        margin-top: 8rpx;
                        font-size: 30rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        text-align: center;
                    }
                    .tips {
                        font-size: 20rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;
                        text-align: center;
                    }
                }
            }
        }
        .popup-content {
            width: 660rpx;
            height: 640rpx;
            background: #FFFFFF;
            box-shadow: 0px 0px 13rpx 0px #999999;
            border-radius: 18rpx;
            position: relative;
            .popup-title {
                font-size: 38rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
                margin-top: 58rpx;
                text-align: center;
                margin-bottom: 15rpx;
            }
            .popup-tips {
                font-size: 26rpx;
                font-weight: 400;
                color: #356CE7;
                text-align: center;
            }
            .popup-form {
                padding: 0 26rpx;
                .input {
                    background: #EEEEEE;
                    border: 1rpx solid #000000;
                    padding: 25rpx;
                    margin-top: 40rpx;
                }
                .tips {
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                    margin-top: 10rpx;
                }
                .button {
                    position: absolute;
                    bottom: 44rpx;
                    overflow: hidden;
                    .cancel {
                        width: 292rpx;
                        height: 88rpx;
                        border-radius: 4rpx;
                        border: 1rpx solid #979797;
                        font-size: 30rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        float: left;
                        text-align: center;
                        line-height: 88rpx;
                    }
                    .confirm {
                        float: left;
                        width: 292rpx;
                        height: 88rpx;
                        background: #000000;
                        border-radius: 4rpx;
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #FFFFFF;
                        text-align: center;
                        line-height: 88rpx;
                        margin-left: 24rpx;
                    }
                    .confirm-disable {
                        float: left;
                        width: 292rpx;
                        height: 88rpx;
                        border-radius: 4rpx;
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #FFFFFF;
                        text-align: center;
                        line-height: 88rpx;
                        margin-left: 24rpx;
                        background: #979797;
                    }
                }
            }
        }
        .nft-detail {
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            .nft-stock {
                box-sizing: border-box;
                display: flex;
                border-radius: 18rpx;
                border: 1px solid #5065DF;
                height: 36rpx;
                overflow: hidden;
                margin-left: 16rpx;
                .nft-stock-name {
                    box-sizing: border-box;
                    background: #5065DF;
                    padding: 0 11rpx;
                    font-size: 22rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    //line-height: 36rpx;
                    height: 36rpx;
                }
                .nft-stock-content {
                    box-sizing: border-box;
                    font-size: 22rpx;
                    font-family: PingFang-SC-Bold, PingFang-SC;
                    font-weight: bold;
                    color: #AAB7FF;
                    //line-height: 36rpx;
                    text-align: center;
                    padding-left: 9rpx;
                    padding-right: 12rpx;
                    height: 36rpx;
                }
            }
            .nft-info-tag {
                box-sizing: border-box;
                margin-left: 16rpx;
                height: 36rpx;
                background: #5065DF;
                border-radius: 18rpx;
                font-size: 22rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                padding: 3rpx 12rpx;
            }
        }
    }
</style>
